<demo>Dialog示例</demo>
<template>
  <lc-button @click="toggle">toggle</lc-button>
  <lc-dialog
    v-model:visible='x'
    title="Dialog"
    :closeOnClickOverlay="false"
    :query="queryBtn"
    :cancel="cancelBtn"
  >
    <template v-slot:content>
      <div>11</div>
      <div>22</div>
    </template>
  </lc-dialog>

  <lc-button @click="toggle1">slot插入标题</lc-button>
  <lc-dialog
    :visible="y" @update:visible="y = $event"
    :query="queryBtn"
    :cancel="cancelBtn"
  >
    <template v-slot:content>
      <div>11</div>
      <div>22</div>
    </template>
    <template v-slot:title>
      <strong>标题</strong>
    </template>
  </lc-dialog>
</template>

<script lang="ts">
  import { ref } from 'vue'
  export default {
    setup() {
      const x = ref(false)
      const toggle = ()=>{
        x.value = !x.value
      }
      const y = ref(false)
      const toggle1 = ()=>{
        y.value = !y.value
      }
      const queryBtn = ()=>{
        console.log("点击确认按钮")
        return false
      }
      const cancelBtn = ()=>{
        return false
      }
      return { x, toggle, queryBtn, cancelBtn, toggle1, y}
    }
  }
</script>

<style scoped>

</style>
